<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>

<c:set var="title" value="新闻管理"/>
<%@include file="common/adminHeader.jsp" %>
<c:set var="light" value="7"/>
<%@include file="common/adminNavigator.jsp" %>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet">

<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.2/js/bootstrap-switch.min.js"></script>--%>
<style>
    #tablelist span {
        height: 80px;
        line-height: 80px;
    }
    #btnSearch {
        width: 53px;
        height: 31px;
    }
    .img-rounded {
        border-radius: 6px;
        height: 63px;
    }
</style>
<div class="container">
    <div class="right-top-box">
        <div class="btn bs-bars">
            <a class="btn-product" id="btn_add" title="添加">
                <i class="fa fa-plus fa-fw"></i>
            </a>
            <a class="btn-delete" id="btn_delete_ids" title="批量删除">
                <i class="fa fa-trash-o fa-fw"></i>
            </a>
        </div>
        <div class="row" id="tb">
            <div class="col-md-12">
                <form class="form-inline" id="resource-form">
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-id" name="search-id"  placeholder="ID">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-title" name="search-title" placeholder="标题">
                    </div>
                    <div class="group-inner">
                        <input type="text" class="form-control form-input" id="search-type_id" name="search-type_id" placeholder="类型">
                    </div>
                    <a class="btn btn-info glyphicon glyphicon-search form-search group-inner fa-search fa fa-fw" id="btnSearch" >
                    </a>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel" data-backdrop="static" aria-hidden="false">
        <div class="modal-backdrop fade"></div>
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <h4 class="modal-title" id="addroleLabel">修改新闻</h4>
                </div>
                <div class="modal-body">
                    <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate="">
                        <div id="addOrUpdateForm_before">
                            <input type="hidden" name="id" value="">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="content_url" id="detail"/>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="title">标题 <span class="required">*</span></label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input type="text" class="form-control col-md-7 col-xs-12" name="title" id="title" required="required" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12">封面</label>
                                <div class="col-md-6 col-sm-6 col-xs-12 img_wh">
                                    <input type="file" class="form-control col-md-7 col-xs-12" name="cover_image" id="cover_image" placeholder="封面">
                                    <span id="insert_img" class="insert_img">
                                    <img src='' id='img_url' class='img-responsive img-rounded auto-shake' onclick='fn_browse_cover_image();'>
                                </span>
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="top">是否置顶</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <select class="form-control" name="top" id="top">
<%--                                        <option value='1' selected>请选择</option>--%>
                                        <option value="0">no</option>
                                        <option value="1">yes</option>
                                    </select>
<%--                                    <input type="checkbox" name="top" id="top" class="checkbox" checked/>--%>
<%--                                    <input type="text" class="form-control col-md-7 col-xs-12" name="top" id="top" data-validate-length-range="0,20" placeholder="请输入是否置顶">--%>
                                </div>
                            </div>
                            <%--<div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="type_id">类型</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <input type="checkbox" name="type_id" id="type_id" class="checkbox_type_id" checked/>
&lt;%&ndash;                                    <input type="text" class="form-control col-md-7 col-xs-12" name="type_id" id="type_id" data-validate-length-range="0,20" placeholder="请输入是否置顶">&ndash;%&gt;
                                </div>
                            </div>--%>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="status">状态</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <select class="form-control" name="status" id="status">
                                        <option value='1' selected disabled>请选择</option>
                                        <option value="0">下架</option>
                                        <option value="1">上架</option>
                                    </select>
<%--                                    <input type="text" class="form-control col-md-7 col-xs-12" name="status" id="status" data-validate-length-range="0,20" placeholder="请输入是否置顶">--%>
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="comment">是否评论</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                    <select class="form-control" name="comment" id="comment">
                                        <option value='' selected disabled>请选择</option>
                                        <option value="0">no</option>
                                        <option value="1">yes</option>
                                    </select>
<%--                                    <input type="checkbox" name="comment" id="comment" class="checkbox_comment" checked/>--%>
                                    <%--                                    <input type="text" class="form-control col-md-7 col-xs-12" name="comment" id="comment" data-validate-length-range="0,20" placeholder="请输入是否置顶">--%>
                                </div>
                            </div>
                            <div class="item form-group">
                                <label class="control-label col-md-3 col-sm-3 col-xs-12" for="description">描述</label>
                                <div class="col-md-6 col-sm-6 col-xs-12">
                                <textarea type="text" class="form-control col-md-7 col-xs-12" rows="3" name="description" id="description" placeholder="请输入内容">
                                </textarea>
                                </div>
                            </div>
                        </div>
                        <div id="addOrUpdateForm_after" style="display: none;">
                            <div id="editor" style="display: block;">
                                <p>请输入内容...</p>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <%--<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"> 关闭</i></button>
                    <button type="button" class="btn btn-success addOrUpdateBtn_next"><i class="fa fa-save">下一步</i></button>
                    <button type="button" class="btn btn-success addOrUpdateBtn" style="display: none;"><i class="fa fa-save">保存</i></button>--%>
                    <button type="button" class="btn btn-default addOrUpdateBtn_close" data-dismiss="modal"><i class="fa fa-close">关闭</i></button>
                    <button type="button" class="btn btn-success addOrUpdateBtn_next"><i class="fa fa-save">下一步</i></button>

                    <button type="button" class="btn btn-success addOrUpdateBtn_before" style="display: none;"><i class="fa fa-save">上一步</i></button>
                    <button type="button" class="btn btn-success addOrUpdateBtn"><i class="fa fa-save">保存</i></button>
                </div>
            </div>
        </div>
    </div>
<table id="tablelist"></table>
<script type="text/javascript" src="render/js/manager/common.js"></script>
<script type="text/javascript" src="render/js/manager/newsManager.js"></script>
</div>
<script type="text/javascript">

    // 下一步
    $(".addOrUpdateBtn_next").on('click', function () {
        $("#addOrUpdateForm_before").css("display","none");
        $("#addOrUpdateForm_after").css("display","");
        $(".addOrUpdateBtn_before").css("display","");
        $(".addOrUpdateBtn_next").css("display","none");
        // $(".addOrUpdateBtn").css("display","");
        $(".addOrUpdateBtn_close").css("display","none");
    });

    //上一步
    $(".addOrUpdateBtn_before").on('click', function () {
        $("#addOrUpdateForm_before").css("display","");
        $("#addOrUpdateForm_after").css("display","none");
        $(".addOrUpdateBtn_before").css("display","none");
        $(".addOrUpdateBtn_next").css("display","");
        // $(".addOrUpdateBtn").css("display","none");
        $(".addOrUpdateBtn_close").css("display","");
    });

    /*$(".addOrUpdateBtn_next").on('click', function () {
        $("#addOrUpdateForm_before").css("display","none");
        $(".addOrUpdateBtn_next").css("display","none");
        $("#addOrUpdateForm_after").css("display","");
        $(".addOrUpdateBtn").css("display","");
    });*/

    $("#cover_image").change(function() {
        var file = $('#cover_image')[0].files[0];
        var binaryData = [];
        binaryData.push(file);
        $("#img_url").attr("src", window.URL.createObjectURL(new Blob(binaryData,{type:"application/zip"})));
    });

    /* 初始化控件 */
    /*$(".checkbox").bootstrapSwitch({
        onText : "是",      // 设置ON文本  
        offText : "否",    // 设置OFF文本  
        onColor : "success",// 设置ON文本颜色     (info/success/warning/danger/primary)  
        offColor : "danger",  // 设置OFF文本颜色        (info/success/warning/danger/primary)  
        size : "normal",    // 设置控件大小,从小到大  (mini/small/normal/large)  
        handleWidth:"35",//设置控件宽度
        // 当开关状态改变时触发  
        onSwitchChange : function(event, state) {
            var ProductId = event.target.defaultValue;
            console.log("ProductId="+ProductId);
            if (state === true) {
                //上线
                // updateProductStatus(ProductId,'AOB');
                /!* alert("ON"); *!/
                console.log("on");
            } else {
                //下线
                // updateProductStatus(ProductId,'AOC');
                /!* alert("OFF"); *!/
                console.log("yes");
            }
        }
    });*/

    var E = window.wangEditor;
    var editor = new E('#editor');
    // 或者 var editor = new E( document.getElementById('editor') )
    // 自定义配置颜色（字体颜色、背景色）
    editor.customConfig.colors = [
        '#000000',
        '#eeece0',
        '#1c487f',
        '#4d80bf',
        '#c24f4a',
        '#8baa4a',
        '#7b5ba1',
        '#46acc8',
        '#f9963b',
        '#ffffff'
    ];

    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ];

    // 自定义 onchange 触发的延迟时间，默认为 200 ms
    editor.customConfig.onchangeTimeout = 1000; // 单位 ms

    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片

    editor.create();
    E.viewsource.init('#editor');
    E.fullscreen.init('#editor');

    $("#detailBtn").on("click",function () {
        var show = $('#editor').css('display');
        if ( show == 'block'){
            $('#editor').css('display','none');
            $("#detailBtn").val("编辑商品介绍");
        }
        if ( show == 'none'){
            $('#editor').css('display','block');
            $("#detailBtn").val("关闭商品介绍");
        }
    });

    function editorText() {
        return editor.txt.html();
    }

    function editorContent(content) {
        editor.txt.html(content);
    }
</script>
<%@include file="common/adminFooter.jsp" %>
</html>
